<template>
	<view class="phone">
		　 <view class="iphone">
			<input type="number" v-model="username" placeholder="请输入手机号" @input="clearInput" />
			<button class="mini-btn" @click="acquireCode" type="primary" size="mini">获取验证码</button>
		</view>
		<view class="iphone">
			<input type="number" v-model="code" placeholder="请输入验证码" @input="clearInput" />
		</view>

		<button class="btn" @click="add" type="primary">登录</button>
		<!-- 协议 -->
		<view class="agreement">
			<checkbox-group>
				<label>
					<checkbox value="cb" color="#55aaff" style="transform:scale(1)background-color: blue" />
				</label>
			</checkbox-group>
			<span>
				同意<b>(园丁用户服务协议)</b>和<b>(隐私协议)</b>
			</span>
		</view>
		<!-- 弹出框 -->
		<view class="modal-mask" v-if="showModal">
			<view class="modal-wrapper">
				<view class="modal-container">
					<h3>{{ modalTitle }}</h3>
					<p>{{ modalMessage }}</p>
					<view class="modal-buttons">
						<button @click="cancelModal">取消</button>
						<button @click="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		codeLogin,
		registerCode
	} from "@/utils/ajax.js"
	import {
		ref,
		reactive
	} from "vue"
	import { useRouter } from 'vue-router'
	const router = useRouter(); // 获取路由

	const username = ref('')
	const code = ref('')
	const phone = ref("")
	// 添加错误提示模态框相关逻辑
	const showModal = ref(false)
	const modalTitle = ref('')
	const modalMessage = ref('')
	// 获取验证码
	function acquireCode() {
		registerCode("5eead1e7ec2d1_1592447463", username.value, 0).then(res => {
			console.log(res);
			if (res.data.api_code === 200) {
				showModal.value = true;
				modalTitle.value = "提示";
				modalMessage.value = "验证码已发送，请注意查收！";
			} else {
				showModal.value = true;
				modalTitle.value = "错误提示";
				modalMessage.value = res.data.api_msg || "未知错误";
			}
		})
	}

	function add() {
		codeLogin(username.value, code.value).then(res => {
				console.log(res);
				// 处理登录请求成功的逻辑
				if (res.data.api_code === 200) {
					showModal.value = true;
					modalTitle.value = "提示";
					modalMessage.value = "登陆成功";
					localStorage.setItem("token", res.data.token)
					showModal.value = false
					// 注册成功后跳转到登录页面
					uni.reLaunch({
					  url: `/pages/index/index?areaName=${res.data.user.park.name}&lunImg=${res.data.user.park.park_id}`
					});
				} else {
					showModal.value = true;
					modalTitle.value = "错误提示";
					modalMessage.value = res.data.api_msg || "未知错误";
				}
			})
			.catch(error => {
				console.error(error);
				// 处理登录请求失败的逻辑
			});
	}
	
	// 清除输入框的值
	function clearInput() {
		showModal.value = false
		modalTitle.value = ''
		modalMessage.value = ''
	}

	// 点击错误提示模态框的取消按钮
	function cancelModal() {
		showModal.value = false
		modalTitle.value = ''
		modalMessage.value = ''
	}

	// 点击错误提示模态框的确定按钮
	function confirmModal() {
		showModal.value = false
		modalTitle.value = ''
		modalMessage.value = ''
	}
</script>
<style>
	.iphone,
	.password {
		position: relative;
		width: 650rpx;
		height: 140rpx;
		margin-bottom: 30px;
		border-bottom: 1px solid #e3e3e3;
		margin: 0 auto;
	}

	input {
		width: 700rpx;
		height: 150rpx;
		font-size: 20px;
		line-height: 150rpx;
	}

	.iphone .uni-icons,
	.password .uni-icons {
		position: absolute;
		top: 14px;
		right: 30px;
	}

	.bottom {
		position: relative;
		width: 700rpx;
		top: 170rpx;
		margin: 0 auto;
	}

	.mini-btn {
		position: absolute;
		right: 0px;
		top: 22px;
	}

	.btn {
		width: 600rpx;
		position: relative;
		top: 40px;
	}

	.agreement {
		position: relative;
		width: 600rpx;
		height: 70rpx;
		/* background-color: antiquewhite; */
		top: 700rpx;
		margin: 0 auto;
	}

	checkbox-group {
		display: inline-block;
	}

	.agreement span {
		/* border:1px solid; */
		display: inline-block;
	}

	.agreement span b {
		color: #55aaff;
	}

	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.modal-container {
		width: 300px;
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
	}

	.modal-buttons {
		display: flex;
		justify-content: space-between;
	}
</style>